<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>介绍 | vue2-element-dict</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/vue2-element-dict/favicon.ico">
    <script defer="defer" async="async" src="https://cpro.baidustatic.com/cpro/ui/cm.js"></script>
    <meta name="description" content="vue2-element-dict字典包官方使用文档">
    
    <link rel="preload" href="/vue2-element-dict/assets/css/0.styles.4793a278.css" as="style"><link rel="preload" href="/vue2-element-dict/assets/js/app.b15cbcb6.js" as="script"><link rel="preload" href="/vue2-element-dict/assets/js/4.26f72541.js" as="script"><link rel="preload" href="/vue2-element-dict/assets/js/33.7b640408.js" as="script"><link rel="prefetch" href="/vue2-element-dict/assets/js/1.de614e96.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/10.2f2bf95a.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/11.ff41966b.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/12.b8277606.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/13.b04a73f4.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/14.4d6242d1.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/15.630dac4e.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/16.a7c1d843.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/17.2b8a9633.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/18.8eb3630c.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/19.6786c2bb.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/2.53443f2d.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/20.a5157105.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/21.d4d5c2c2.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/22.8b3228db.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/23.c5c8d87f.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/24.fccc0622.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/25.01db42e3.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/26.faa5aea5.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/27.80a1c84f.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/28.a9a8221b.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/29.2fcd2f4e.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/30.dd694ba1.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/31.99cbdf15.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/32.1fb6dad3.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/34.1c4b9978.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/35.a2561dd0.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/36.c02c0325.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/37.f5704977.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/5.0ef459b8.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/6.d8b0c3f6.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/7.08430ef6.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/8.d5c78b56.js"><link rel="prefetch" href="/vue2-element-dict/assets/js/9.cbf8f2c2.js">
    <link rel="stylesheet" href="/vue2-element-dict/assets/css/0.styles.4793a278.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue2-element-dict/" class="home-link router-link-active"><!----> <span class="site-name">vue2-element-dict</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue2-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue2-element-dict/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue2-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue2-element-dict/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/vue2-element-dict/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  指南
</a></div><div class="nav-item"><a href="https://www.npmjs.com/package/vue2-element-dict" target="_blank" rel="noopener noreferrer" class="nav-link external">
  npm地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>捐赠</span> <!----></p> <!----></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue2-element-dict/guide/" aria-current="page" class="active sidebar-link">介绍</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue2-element-dict/guide/#优势" class="sidebar-link">优势</a></li><li class="sidebar-sub-header"><a href="/vue2-element-dict/guide/#项目依赖" class="sidebar-link">项目依赖</a></li><li class="sidebar-sub-header"><a href="/vue2-element-dict/guide/#后端字典接口要求" class="sidebar-link">后端字典接口要求</a></li><li class="sidebar-sub-header"><a href="/vue2-element-dict/guide/#组件及方法" class="sidebar-link">组件及方法</a></li><li class="sidebar-sub-header"><a href="/vue2-element-dict/guide/#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/vue2-element-dict/guide/fast/" class="sidebar-link">快速开始</a></li><li><a href="/vue2-element-dict/guide/directory-structure/" class="sidebar-link">目录结构</a></li><li><a href="/vue2-element-dict/guide/config/" class="sidebar-link">字典包配置</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>普通字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue2-element-dict/components/el-select-dict/" class="sidebar-link">select-dict选择器</a></li><li><a href="/vue2-element-dict/components/el-radio-dict/" class="sidebar-link">radio-dict单选框</a></li><li><a href="/vue2-element-dict/components/el-checkbox-dict/" class="sidebar-link">checkbox-dict多选框</a></li><li><a href="/vue2-element-dict/components/el-radio-button-dict/" class="sidebar-link">radio-button-dict单选框</a></li><li><a href="/vue2-element-dict/components/el-checkbox-button-dict/" class="sidebar-link">checkbox-button-dict多选框</a></li><li><a href="/vue2-element-dict/components/el-tabs-dict/" class="sidebar-link">tabs-dict标签页</a></li><li><a href="/vue2-element-dict/components/el-tag-dict/" class="sidebar-link">tag-dict标签</a></li><li><a href="/vue2-element-dict/components/el-link-dict/" class="sidebar-link">link-dict链接</a></li><li><a href="/vue2-element-dict/components/el-text-dict/" class="sidebar-link">text-dict链接</a></li><li><a href="/vue2-element-dict/components/el-button-dict/" class="sidebar-link">button-dict链接</a></li><li><a href="/vue2-element-dict/components/el-table-colmun-dict/" class="sidebar-link">el-table-colmun-dict表格</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>树形字典组件</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue2-element-dict/components/el-cascader-dict/" class="sidebar-link">cascader-dict联级选项</a></li><li><a href="/vue2-element-dict/components/el-tree-dict/" class="sidebar-link">tree-dict树菜单</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>过滤器</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue2-element-dict/filters/dict/" class="sidebar-link">字典过滤器</a></li><li><a href="/vue2-element-dict/filters/tree-dict/" class="sidebar-link">树形字典过滤器</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>方法</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vue2-element-dict/functions/dict/" class="sidebar-link">字典方法</a></li><li><a href="/vue2-element-dict/functions/other/" class="sidebar-link">其他方法</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h1> <p>vue2-elment-dict是一款基于elment组件库部分组件配合请求字典数据接口形成的一个字典包。能够让您的项目经过一次配置，后续关于字典的使用更加简单方便。<a href="/vue2-element-dict/guide/fast/">快速开始&gt;&gt;</a></p> <h2 id="优势"><a href="#优势" class="header-anchor">#</a> 优势</h2> <ol><li>配置项多，更灵活，减少对后端接口入参及响应的依赖</li> <li>可用组件多，很多组件（包含联级选项和树形控件树形选择器）均可一行代码直接使用</li> <li>拥有字典过滤器方法</li> <li>暴露出多种实用方法，字典相关，树形字典相关，日期格式化，脱敏等</li> <li>性能优越，对于同个字典类型的请求，同时只会请求一次</li> <li>适用场景多，嵌套iframe业务功能页也可使用</li> <li>可配置版本，实现字典数据自动更新</li> <li>使用缓存，减少请求，提升性能。</li> <li>也可配置本地固定字典数据</li> <li>可过滤或禁用部分字典数据</li></ol> <h2 id="项目依赖"><a href="#项目依赖" class="header-anchor">#</a> 项目依赖</h2> <p>无，只需在使用前 引入 element 相应组件及样式即可</p> <h2 id="后端字典接口要求"><a href="#后端字典接口要求" class="header-anchor">#</a> 后端字典接口要求</h2> <p><strong>可以请求单个或多个甚至全部字典类型数据</strong></p> <p>注意：此字典包可以对接口数据和接口请求进行配置，但是为了减少配置，后端尽可能按此包默认形式返回对前端更加友好。具体请求格式可以参照。<a href="/vue2-element-dict/guide/directory-structure/">目录结构&gt;&gt;</a>中 模拟接口请求的形式。具体如下：</p> <ol><li>默认请求参数： {dictType: &quot;&quot;} dictType为空返回全部字典值</li> <li>获取多个字典 请求参数 {dictType: &quot;AAC004,AAC005&quot;} 英文逗号隔开</li></ol> <p>如果接口与字典包不符，可参照<a href="/vue2-element-dict/guide/config/">字典包配置项&gt;&gt;</a></p> <!----> <h2 id="组件及方法"><a href="#组件及方法" class="header-anchor">#</a> 组件及方法</h2> <blockquote><p>组件</p> <blockquote><p>el-select-dict   下拉组件</p> <p>el-radio-dict    单选框组件</p> <p>el-radio-button-dict   单选框按钮样式组件</p> <p>el-checkbox-dict  复选框组件</p> <p>el-checkbox-button-dict 复选框组件按钮样式</p> <p>el-tabs-dict     tabs栏组件</p> <p>el-table-column-dict    表格列组件</p> <p>el-cascader-dict      联级选项组件</p> <p>el-tree-dict           树形控件组件</p> <p>el-button--dict     按钮组件</p> <p>el-link-dict      link组件</p> <p>el-tag-dict     标签组件</p> <p>el-text-dict     text文字组件</p></blockquote> <p>过滤器：字典过滤方法 页面中管道符 过滤器使用方式   无需引入 已全局注册</p> <blockquote><p>getLabelByCodeFilter</p> <p>getLabelByCodesFilter</p> <p>getCodeByLabelFilter</p> <p>getCodeByLabelsFilter</p> <p>getTreeLabelByCodeFilter</p> <p>getTreeLabelByCodesFilter</p> <p>getTreeCodeByLabelFilter</p> <p>getTreeCodeByLabelsFilter</p></blockquote> <p>方法</p> <blockquote><p>普通方法  函数</p> <blockquote><p>getDictConfig</p> <p>getDictConfigByKey</p></blockquote> <p>字典相关  promise方法</p> <blockquote><p>getLabelByCode</p> <p>getLabelByCodes</p> <p>getCodeByLabel</p> <p>getCodeByLabels</p> <p>getTreeLabelByCode</p> <p>getTreeLabelByCodes</p> <p>getTreeCodeByLabel</p> <p>getTreeCodeByLabels</p></blockquote> <p>日期格式化 函数</p> <blockquote><p>formatDate</p> <p>isDate</p></blockquote> <p>脱敏相关  函数</p> <blockquote><p>mask</p> <p>maskAddress</p> <p>maskIdCard</p> <p>maskName</p> <p>maskPhone</p> <p>desensitization</p></blockquote> <p>树形结构相关 函数</p> <blockquote><p>listToTree</p> <p>getTreeItemByCode</p> <p>getTreeItemByLabel</p></blockquote></blockquote></blockquote> <h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>vue2-elment-dict 真香，使用后大家都说好，更多经验分享可关注微信公众号【爆米花小布】</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">5/17/2023, 10:28:44 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/vue2-element-dict/guide/fast/">
        快速开始
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><!----></div></div>
    <script src="/vue2-element-dict/assets/js/app.b15cbcb6.js" defer></script><script src="/vue2-element-dict/assets/js/4.26f72541.js" defer></script><script src="/vue2-element-dict/assets/js/33.7b640408.js" defer></script>
  </body>
</html>
